
<!doctype html>

<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>jQuery UI Selectable - Serialize</title>
	<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
	<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
	<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
	<link rel="stylesheet" href="/resources/demos/style.css" />

	<style>
	#feedback { font-size: 1.4em; }
	#selectable .ui-selecting { background: #FECA40; }
	#selectable .ui-selected { background: #F39814; color: white; }
	#selectable { list-style-type: none; margin: 0; padding: 0; width: 60%; position: relative; }
	#selectable li { margin: 3px; padding: 1px; float: left; width: 15px; height: 15px; font-size: .5em; text-align: center; }
	#selectable img{ width: 30px; height: 20px; float: left;}
	</style>
	<script>
	$(function() {
		$( "#selectable" ).selectable({
			stop: function() {
				var result = $( "#select-result" ).empty();
				$( ".ui-selected", this ).each(function() {
					var index = $( "#selectable li" ).index( this );
					result.append( " #" + ( index + 1 ) );
				});
			}
		});
	});
	</script>
</head>
<body>
<ol id="selectable">
	<li class="ui-widget-content">A1</li>
	<li class="ui-widget-content">A2</li>
	<li class="ui-widget-content">A3</li>
	<li class="ui-widget-content">A4</li>
	<li class="ui-widget-content">A5</li>
	<li class="ui-widget-content">A6</li>
	<li class="ui-widget-content">A7</li>
	<li class="ui-widget-content">A8</li>
	<li class="ui-widget-content">A9</li>
	<li class="ui-widget-content">A10</li>
	<li class="ui-widget-content">A11</li>
	<li class="ui-widget-content">A12</li>
	<li class="ui-widget-content">A13</li>
	<li class="ui-widget-content">A14</li>
	<li class="ui-widget-content">A15</li>
	<li class="ui-widget-content">A16</li>
	<li class="ui-widget-content">A17</li>
	<li class="ui-widget-content">A18</li>
	<li class="ui-widget-content">A19</li>
	<li class="ui-widget-content">A20</li>
	<br></br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<li class="ui-widget-content">B1</li>
	<li class="ui-widget-content">B2</li>
	<li class="ui-widget-content">B3</li>
	<li class="ui-widget-content">B4</li>
	<li class="ui-widget-content">B5</li>
	<li class="ui-widget-content">B6</li>
	<li class="ui-widget-content">B7</li>
	<li class="ui-widget-content">B8</li>
	<li class="ui-widget-content">B9</li>
	<li class="ui-widget-content">B10</li>
	<li class="ui-widget-content">B11</li>
	<li class="ui-widget-content">B12</li>
	<li class="ui-widget-content">B13</li>
	<li class="ui-widget-content">B14</li>
	<li class="ui-widget-content">B15</li>
	<br></br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<li class="ui-widget-content">C1</li>
	<li class="ui-widget-content">C2</li>
	<li class="ui-widget-content">C3</li>
	<li class="ui-widget-content">C4</li>
	<li class="ui-widget-content">C5</li>
	<li class="ui-widget-content">C6</li>
	<li class="ui-widget-content">C7</li>
	<li class="ui-widget-content">C8</li>
	<li class="ui-widget-content">C9</li>
	<li class="ui-widget-content">C10</li>
	<li class="ui-widget-content">C11</li>
	<li class="ui-widget-content">C12</li>
	<li class="ui-widget-content">C13</li>
	<li class="ui-widget-content">C14</li>
	<li class="ui-widget-content">C15</li>
	<br></br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<li class="ui-widget-content">D1</li>
	<li class="ui-widget-content">D2</li>
	<li class="ui-widget-content">D3</li>
	<li class="ui-widget-content">D4</li>
	<li class="ui-widget-content">D5</li>
	<li class="ui-widget-content">D6</li>
	<li class="ui-widget-content">D7</li>
	<li class="ui-widget-content">D8</li>
	<li class="ui-widget-content">D9</li>
	<li class="ui-widget-content">D10</li>
	<li class="ui-widget-content">D11</li>
	<li class="ui-widget-content">D12</li>
	<li class="ui-widget-content">D13</li>
	<li class="ui-widget-content">D14</li>
	<li class="ui-widget-content">D15</li>
	<br></br>
	<li class="ui-widget-content">E1</li>
	<li class="ui-widget-content">E2</li>
	<li class="ui-widget-content">E3</li>
	<li class="ui-widget-content">E4</li>
	<li class="ui-widget-content">E5</li>
	<li class="ui-widget-content">E6</li>
	<li class="ui-widget-content">E7</li>
	<li class="ui-widget-content">E8</li>
	<li class="ui-widget-content">E9</li>
	<li class="ui-widget-content">E10</li>
	<li class="ui-widget-content">E11</li>
	<li class="ui-widget-content">E12</li>
	<li class="ui-widget-content">E13</li>
	<li class="ui-widget-content">E14</li>
	<li class="ui-widget-content">E15</li>
	<br></br>
	&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
	<li class="ui-widget-content">F1</li>
	<li class="ui-widget-content">F2</li>
	<li class="ui-widget-content">F3</li>
	<li class="ui-widget-content">F4</li>
	<li class="ui-widget-content">F5</li>
	<li class="ui-widget-content">F6</li>
	<li class="ui-widget-content">F7</li>
	<li class="ui-widget-content">F8</li>
	<li class="ui-widget-content">F9</li>
	<li class="ui-widget-content">F10</li>
	<li class="ui-widget-content">F11</li>
	<li class="ui-widget-content">F12</li>
	<li class="ui-widget-content">F13</li>
	<li class="ui-widget-content">F14</li>
	<li class="ui-widget-content">F15</li>
	<br></br>
</ol>
<p id="feedback" align="right">
<span>You've selected:</span> <span id="select-result">none</span>.
</p>
</body>
</html>
